<template>
  <div>
    <h2>$refs和$parent</h2>
    <h4>房产: {{ house }}</h4>
    <button @click="changeC1">修改child1玩具</button>
    <button @click="changeC2">修改child2</button>
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts">
  import Child1 from './child1.vue'
  import Child2 from './child2.vue'
  import { ref } from 'vue'

  let house = ref(4)
  let c1 = ref()
  let c2 = ref()
  const changeC1 = () => {
    console.log(c1.value) //c1组件实例对象
    c1.value.toy = '假面骑士'
  }

  const changeC2 = () => {
    console.log(c2.value) //c2组件实例对象
    c2.value.monster = '百慕拉'
  }

  const getAllChild = (refs:{[key:string]:any}) => {
    console.log(refs) // 包含所有子组件实例的对象
    for(let key in refs) {  //key: c1
      refs[key].book += 2
    }
  }

  defineExpose({house})

</script>

<style>

</style>